﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产任务选择</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .search-box {
            padding: 15px;
            background-color: #f2f2f2;
            margin-bottom: 15px;
        }
        .layui-form-label {
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
        .footer-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            text-align: center;
            background-color: #fff;
            border-top: 1px solid #e6e6e6;
        }
        /* 添加行悬停和选中效果 */
        .layui-table-hover {
            background-color: #f2f2f2 !important;
        }
        .layui-table-click {
            background-color: #e6e6e6 !important;
        }
        /* 让整行可点击的样式 */
        .layui-table tbody tr {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <!-- 搜索条件 -->
        <div class="search-box">
            <form class="layui-form" action="">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属工序</label>
                            <div class="layui-input-block">
                                <select name="processBelongs" lay-filter="processBelongs">
                                    <option value="">请选择工序</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属工作站</label>
                            <div class="layui-input-block">
                                <input type="text" name="workstationCode" placeholder="请输入工作站编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="taskNumber" placeholder="请输入任务编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12" style="text-align: center;">
                        <button type="button" class="layui-btn" lay-submit lay-filter="searchForm">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 数据表格 -->
        <table class="layui-hide" id="productionTaskTable" lay-filter="productionTaskTable"></table>

        <!-- 底部按钮 -->
        <div class="footer-buttons">
            <button type="button" class="layui-btn" id="confirmBtn">确定</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="parent.layer.close(parent.layer.getFrameIndex(window.name))">取消</button>
        </div>
    </div>

<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    
    <!-- 操作列模板 -->
    <script type="text/html" id="operationBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="apply">应用</a>
    </script>

<script>
        layui.use(['table', 'form', 'layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var selectedData = null;
            
            // 初始化表格
            table.render({
                elem: '#productionTaskTable'
                ,url: '/ProductionReport/GetProductionTask'
                ,method: 'get'
                ,toolbar: '#toolbarDemo'
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,title: '生产任务选择'
                ,cols: [[
                    {type: 'radio', fixed: 'left'}
                    ,{field: 'taskNumber', title: '任务编号', width: 150}
                    ,{field: 'taskName', title: '任务名称', width: 200}
                    ,{field: 'workstationCode', title: '工作站编号', width: 120}
                    ,{field: 'workstationName', title: '工作站名称', width: 150}
                    ,{field: 'schedulingNumber', title: '排产数量', width: 100}
                    ,{field: 'producedNumber', title: '已生产数量', width: 100}
                    ,{field: 'startProducedTime', title: '开始生产时间', width: 160, templet: function(d){
                        return d.startProducedTime ? layui.util.toDateString(new Date(d.startProducedTime), 'yyyy-MM-dd HH:mm') : '';
                    }}
                    ,{field: 'producedDuration', title: '生产时长', width: 100}
                    ,{field: 'estimatedCompletionTime', title: '预计完成时间', width: 160, templet: function(d){
                        return d.estimatedCompletionTime ? layui.util.toDateString(new Date(d.estimatedCompletionTime), 'yyyy-MM-dd HH:mm') : '';
                    }}
                    ,{field: 'status', title: '显示颜色', width: 100, templet: function(d){
                        return '<span class="layui-badge layui-bg-blue">蓝色</span>';
                    }}
                    ,{title: '操作', toolbar: '#operationBar', width: 120, fixed: 'right'}
                ]]
                ,page: true
                ,height: 'full-270'
                ,parseData: function(res){
                    if (Array.isArray(res)) {
                        return {
                            "code": 0, // 注意这里返回0表示成功
                            "msg": "",
                            "count": res.length,
                            "data": res
                        };
                    } else {
                        return {
                            "code": 1,
                            "msg": "数据格式错误",
                            "count": 0,
                            "data": []
                        };
                    }
                }
                ,request: {
                    pageName: 'page',
                    limitName: 'limit'
                }
                ,response: {
                    statusCode: 0  // 重要：这里规定成功的状态码为0
                }
                ,where: {
                    processBelongs: '',
                    workstationCode: '',
                    taskNumber: ''
                }
            });

            // 监听行单选框选中事件
            table.on('radio(productionTaskTable)', function(obj){
                selectedData = obj.data;
            });

            // 添加行点击事件监听
            table.on('row(productionTaskTable)', function(obj){
                // 选中当前行的单选框
                obj.tr.find('input[type="radio"]').prop('checked', true);
                
                // 更新选中数据
                selectedData = obj.data;
                
                // 更新行的选中状态样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                
                // 触发 radio 事件以保持一致性
                layui.form.render('radio');
            });

            // 监听工具条事件
            table.on('tool(productionTaskTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    // 查看操作
                    layer.msg('查看任务详情：' + data.taskNumber);
                } else if(obj.event === 'apply'){
                    // 应用操作
                    selectedData = data;
                    $('#confirmBtn').click();
                }
            });

            // 确定按钮点击事件
            $('#confirmBtn').on('click', function(){
                if(!selectedData) {
                    layer.msg('请选择一条数据');
                    return;
                }
                
                // 向父窗口传递选中的数据
                var index = parent.layer.getFrameIndex(window.name);
                
                // 获取父窗口的jQuery对象
                var parentWindow = $(parent.document);
                
                // 设置父窗口中对应输入框的值
                parentWindow.find('#productionTask').val(selectedData.taskNumber);
                parentWindow.find('#workstationName').val(selectedData.workstationName);
                
                // 触发父窗口的表单更新
                parent.layui.form.render();
                
                // 关闭弹窗
                parent.layer.close(index);
            });

            // 搜索表单提交
            form.on('submit(searchForm)', function(data){
                selectedData = null;  // 重置选中数据
                table.reload('productionTaskTable', {
                    where: {
                        processBelongs: data.field.processBelongs,
                        workstationCode: data.field.workstationCode,
                        taskNumber: data.field.taskNumber
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });
        });
</script>
</body>
</html>
